<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css/base.css">
<title>listManager:在特定容器中使用的吸顶效果 [如dialog]</title>
<style>
html, body{
	overflow-x:hidden;
}
h2{
	font-size:22px;
	padding:10px 30px;
	color:#333;
}
p{
	font-size:14px;
	padding:10px 30px;
	color:#333;
	text-indent:2em;
}
hr{    
	margin-top: 18px;
    margin-bottom: 18px;
    border: 0;
    border-top: 1px solid #eee;
}
.dialog-demo{
	width:70%;
	height:300px;
	overflow-x:hidden;
	overflow-y:auto;
	margin:20px auto;
	padding:20px;
}
</style>
</head>

<body>
<h2>listManager:在特定容器中使用的吸顶效果 [如dialog]</h2>
<p>存在.json文件，谷歌需要放到环境中效果才能展现</p>
<hr/>
	<div class="dialog-demo">
    <table grid-manager="demoOne"></table>
</div>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/GridManager.js"></script>
<script type="text/javascript" >
$(function(){
	//单列表简易渲染
	var table = $('table[grid-manager]');
	$.fn.GM.defaults = {
		isDevelopMode: true, 
		autoLoadCss:true  //自动加载CSS文件，无需在页面中引用
	}
	table.GM({
		supportRemind: true
		,scrollDOM: '.dialog-demo'
		,supportSetTop: true
		,supportRemind: true
		,i18n:'zh-cn'
		,textConfig:{
			'page-go': {
				'zh-cn':'跳转',
				'en-us':'Go '
			}
		}
		,gridManagerName:'aaa'
		,disableCache:false
		,disableOrder:false
		,supportSorting: true
		,supportDrag:true
		,supportAjaxPage:true
		,isCombSorting: false
    	,ajax_url: 'data/test.json'
    	,ajax_type: 'POST'
		,pageSize:30
		,query: {ex: '用户自定义的查询参数,格式:{key:value}'}
		,columnData: [{
				key: 'name',
				remind: 'the username',
				sorting: 'up',
				width: '200px',
				text: 'username',
				template: ''
			},{
				key: 'age',
				remind: 'the age',
				sorting: '',
				width: '200px',
				text: 'age',
				template: ''
			},{
				key: 'createDate',
				remind: 'the createDate',
				sorting: 'down',
				width: '200px',
				text: 'createDate',
				template: ''
			},{
				key: 'info',
				remind: 'the info',
				sorting: '',
				width: '200px',
				text: 'info',
				template: ''
			},{
				key: 'operation',
				remind: 'the operation',
				sorting: '',
				width: '200px',
				text: 'operation',
				template: function(operation, rowObject){  //operation:当前key所对应的单条数据；rowObject：单个一行完整数据
					return '<a href=javascript:alert("这是一个按纽");>'+operation+'</a>';
				}
			}
		]
		,pagingBefore:function(query){
      		console.log('Event: 分页前', query);
		}
		,pagingAfter: function(query){
		  	console.log('Event: 分页后', query);	
		}
		,sortingBefore:function(query){
      		console.log('Event: 排序前', query);
		}
		,sortingAfter: function(query){
		  	console.log('Event: 排序后', query);
		}
		,ajax_beforeSend: function(query){
		  	console.log('Event: ajax_beforeSend', query);
		}
		,ajax_complete: function(data){
		  	console.log('Event: ajax_complete', data);
		}
	},function(query){
		console.log('init方法回调query参数', query);
	});
});
</script>
</body>
</html>
